<%@page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tld/c.tld" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>My JSP 'searchByDepAndDes.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript"
			src="http://api.map.baidu.com/api?v=1.3"></script>
	</head>

	<body>
		<div>
			<div>
				<div style="width: 520px; height: 340px; border: 1px solid gray"
					id="departureContainer">
				</div>
				<div>
					出发地信息
					<table>
						<tr>
							<td>
								省份
								<br>
							</td>
							<td>
								<input type="text" name="dep_province" value="" readOnly="true"
									id="dep_province" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								城市
								<br>
							</td>
							<td>
								<input type="text" name="dep_city" value="" readOnly="true"
									id="dep_city" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								区县
								<br>
							</td>
							<td>
								<input type="text" name="dep_district" value="" readOnly="true"
									id="dep_district" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								街道
								<br>
							</td>
							<td>
								<input type="text" name="dep_street" value="" readOnly="true"
									id="dep_street" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								门牌号
								<br>
							</td>
							<td>
								<input type="text" name="dep_streetNumber" value=""
									readOnly="true" id="dep_streetNumber" />
								<br>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div>
				<div style="width: 520px; height: 340px; border: 1px solid gray"
					id="destinationContainer">
				</div>
				<div>
					目的地信息
					<table>
						<tr>
							<td>
								省份
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_province" value="" readOnly="true"
									id="des_province" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								城市
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_city" value="" readOnly="true"
									id="des_city" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								区县
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_district" value="" readOnly="true"
									id="des_district" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								街道
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_street" value="" readOnly="true"
									id="des_street" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								门牌号
								<br>
							</td>
							<td>
								<input type="text" name="des_streetNumber" value=""
									readOnly="true" id="des_streetNumber" />
								<br>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div>
			<form action="inCitySearch.do" method="post">
				<input name="desX" value="" id="des_x" />
				<input name="desY" value="" id="des_y" />
				<input name="depX" value="" id="dep_x" />
				<input name="depY" value="" id="dep_y" />
				<input type="submit" value="查询"/>
			</form>
		</div>
		<br>
	</body>
</html>
<script type="text/javascript">
	//出发地地图
	var departureMap = new BMap.Map("departureContainer");
	departureMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
	departureMap.addControl(new BMap.NavigationControl());
	departureMap.addControl(new BMap.ScaleControl());
	departureMap.addControl(new BMap.OverviewMapControl());
	departureMap.enableScrollWheelZoom();

	function departureIPAddress(result) {
		var cityName = result.name;
		departureMap.setCenter(cityName);
	}

	var departureCity = new BMap.LocalCity();
	departureCity.get(departureIPAddress);

	var departureGC = new BMap.Geocoder();
	departureMap
			.addEventListener(
					"click",
					function(e) {
						var point = e.point;
						departureGC
								.getLocation(
										point,
										function(rs) {
											var addComp = rs.addressComponents;
											if (confirm(addComp.province + ", "
													+ addComp.city + ", "
													+ addComp.district + ", "
													+ addComp.street + ", "
													+ addComp.streetNumber)) {
												departureMap.clearOverlays();
												departureMap
														.addOverlay(new BMap.Marker(
																point));
												document
														.getElementById('dep_province').value = addComp.province;
												document
														.getElementById('dep_city').value = addComp.city;
												document
														.getElementById('dep_district').value = addComp.district;
												document
														.getElementById('dep_street').value = addComp.street;
												document
														.getElementById('dep_streetNumber').value = addComp.streetNumber;
												document.getElementById('dep_x').value=point.lng;
												document.getElementById('dep_y').value=point.lat;
											}
										});
					});

	//目的地地图
	var destinationMap = new BMap.Map("destinationContainer");
	destinationMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
	destinationMap.addControl(new BMap.NavigationControl());
	destinationMap.addControl(new BMap.ScaleControl());
	destinationMap.addControl(new BMap.OverviewMapControl());
	destinationMap.enableScrollWheelZoom();

	function destinationIPAddress(result) {
		var cityName = result.name;
		destinationMap.setCenter(cityName);
	}

	var distinationCity = new BMap.LocalCity();
	distinationCity.get(destinationIPAddress);

	var distinationGC = new BMap.Geocoder();
	destinationMap
			.addEventListener(
					"click",
					function(e) {
						var point = e.point;
						distinationGC
								.getLocation(
										point,
										function(rs) {
											var addComp = rs.addressComponents;
											if (confirm(addComp.province + ", "
													+ addComp.city + ", "
													+ addComp.district + ", "
													+ addComp.street + ", "
													+ addComp.streetNumber)) {
												destinationMap.clearOverlays();
												destinationMap
														.addOverlay(new BMap.Marker(
																point));
												document
														.getElementById('des_province').value = addComp.province;
												document
														.getElementById('des_city').value = addComp.city;
												document
														.getElementById('des_district').value = addComp.district;
												document
														.getElementById('des_street').value = addComp.street;
												document
														.getElementById('des_streetNumber').value = addComp.streetNumber;
												document.getElementById('des_x').value=point.lng;
												document.getElementById('des_y').value=point.lat;
											}
										});
					});
</script>
